<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta name="misapplication-tap-highlight" content="no"/>
    <meta name="HandheldFriendly" content="true"/>
    <meta name="MobileOptimized" content="320"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title>查桩</title>
<#assign base=request.contextPath  />
    <link rel="stylesheet" type="text/css" href="${base}/css/demo.css"/>
    <link rel="stylesheet" type="text/css" href="${base}/Yang/layui/css/layui.css"/>
    <link rel="stylesheet" href="${base}/css/common.css" type="text/css" charset="utf-8"/>
    <script src="${base}/Yang/layui/layui.all.js"></script>
    <script src="${base}/js/jquery-1.8.2.min.js"></script>
    <script src="${base}/js/demo.js"></script>
    <script src="${base}/js/truck.23648f77.js"></script>
    <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
    <script type="text/javascript"src="https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js"></script>

    <style type="text/css">
        .top2 {
            border-top: 1px solid #585858;
            border-bottom: 2px solid #C6C6C6;
            width: 100%;
            height: 45px;
            padding: 0px;
            margin: 0px;
            font-weight: bold;
            text-align: left;
            background-color: white;

        }

        p {
            padding: 5px;
            padding-right: 10%;
        }

        .butt button {
            float: left;
            border-radius: 8px;
            font-weight: bold;
            font-size: 14px;
        }

        /*.foot {*/
            /*position: fixed; !*or前面的是absolute就可以用*!*/
            /*bottom: 1px;*/
            /*left: 0px;*/
            /*right: 0px;*/
            /*width: 100%;*/
            /*height: 60px;*/
            /*line-height: 60px;*/

        /*}*/

        .foot a {
            width: 33%;
        }

        /*.butfont {*/
            /*width: 10%;*/
            /*border-radius: 50%;*/
            /*font-size: 23px;*/
            /*font-weight: bold;*/
            /*color: white;*/
            /*background-color: #9AC747;*/
            /*border: none;*/
            /*height: 66%;*/
            /*margin-left: 10px;*/
        /*}*/

        select {
            width: 100%;
            height: 45px;
            color: #8F8F94;
            border-radius: 6px;
        }
    </style>
    <style type="text/css">
        html, body {
            width: 100%;
            height: 100%;
        }

        * {
            margin: 0px;
            padding: 0px;
        }

        body, button, input, select, textarea {
            font: 12px/16px Verdana, Helvetica, Arial, sans-serif;
        }

        p {
            width: 603px;
            padding-top: 3px;
            overflow: hidden;
        }


        #container {
            min-width: 600px;
            min-height: 767px;
        }
        .content {
            text-align: center;
            padding-top: 44px;
        }
        div.screening>ul>li {
            background:none;
        }
        .meishi22>ul, .grade-eject>ul, .Category-eject>ul, .Sort-eject>ul {
            height: auto;
        }
    </style>
</head>

<body onselectstart="return false;" style="background-color: #F2F2F2;">
<header id="header">
    <div id="back" class="nvbt layui-icon layui-icon-refresh-1" onclick="javascript:window.location.reload()"
         style="font-size: 20px;"></div>
    <div class="nvtt" style="font-size: 20px;">查桩</div>
</header>
<div class="content" style="height: 100%;">
    <div class="top2">
        <div class="screening">
            <ul>
            <#--<li class="Regional"style="width: 44%;text-align: left;padding-left: 20px;">位置</li>-->
                <li class="Sort" style="width: 80%;font-size: 16px">离我最近<i class="layui-icon" style="float: right;margin-right: 10px">&#xe625;</i></li>
                <button onclick="javascript:window.location.href='${base}/weStationinfo/main.html'"
                        style="height: 48px;width: 18%;font-size: 16px;font-weight: bold;border-top: none;border-bottom: none;border-right: none;"
                        class="layui-btn layui-btn-primary">列表
                </button>
            </ul>

        </div>
        <div class="Sort-eject Sort-height">
            <ul class="Sort-Sort" id="Sort-Sort">
                <li class="Sort" id="daba">大巴</li>
                <li class="Sort" id="wuliu" onclick="">物流车</li>
                <li class="Sort" id="sijia" onclick="">私家乘用车</li>
                <li class="Sort" id="chucu" onclick="">出租车</li>
                <li class="Sort" id="qita" onclick="findNearbyStation(map,null)">其他</li>
            </ul>
        </div>
     </div>
    <div id="chargeList">
        <script src="${base}js/truck.23648f77.js"></script>
        <!--   定义地图显示容器   -->
        <div id="container"></div>


        <#--<div class="foot">-->
            <#--<a class="layui-btn" style="background-color: #9AC747"><i class="layui-icon">&#xe663;</i>扫码充电</a>-->
            <#--<button class="butfont" style="width: 40px;height: 40px; border-radius: 50%;font-size: 20px;">?</button>-->
         <#--</div>-->
    </div>


    <script>

        $(function () {
            $('.choosebox li a').click(function () {
                var thisToggle = $(this).is('.size_radioToggle') ? $(this) : $(this).prev();
                var checkBox = thisToggle.prev();
                checkBox.trigger('click');
                $('.size_radioToggle').removeClass('current');
                thisToggle.addClass('current');
                return false;
            });
        });

        $(".choosebox li a").click(function () {
            var text = $(this).html();
            $(".choosetext span").html(text);
            $("#result").html("" + getSelectedValue("dress-size"));
        });

        function getSelectedValue(id) {
            return
            $("#" + id).find(".choosetext span.value").html();
        }


        window.onload = function () {
            layer.load(2);
            var Marks = [];
            var nextLat="";
            var nextLng="";
           //直接加载地图
            var geolocation = new qq.maps.Geolocation("CB3BZ-6UFWS-E3JO7-6YDMB-WEDCJ-ZKFFK", "充电地图开发");
            var options = {timeout: 8000};
            geolocation.getLocation(showPosition, showErr, options);
            function showPosition(position) {
                initMapByLocal(position.lat,position.lng);
                nextLat=position.lat;
                nextLng=position.lng;
                layer.closeAll('loading');
            }
            function showErr() {
                layer.closeAll('loading');
                alert("定位失败");
            }

            function initMapByLocal(nextLat,nextLng){
                //定义map变量 调用 qq.maps.Map() 构造函数   获取地图显示容器
                var map = new qq.maps.Map(document.getElementById("container"), {
                    center: new qq.maps.LatLng(nextLat,nextLng),      // 地图的中心地理坐标。
                    zoom: 16                                                 // 地图的中心地理坐标。
                });
                //调用初始化函数地图
                init(map,nextLat,nextLng);
                $("#daba").on('click', function () {
                    findNearbyStation(map, '大巴');
                });

                $("#wuliu").on('click', function () {
                    findNearbyStation(map, '物流车')
                });
                $("#sijia").on('click', function () {
                    findNearbyStation(map, '私家乘用车')
                });
                $("#chucu").on('click', function () {
                    findNearbyStation(map, '出租车')
                });
                $("#qita").on('click', function () {
                    findNearbyStation(map, null)
                });

            }

            //初始化地图函数  自定义函数名init
            function init(map,nextLat,nextLng) {
                //先标记自身位置
                MyLocationMarker(map,nextLat,nextLng);
                //添加附近充电桩marker
                findNearbyStation(map,nextLat,nextLng, null);

            }



            //先标记自身位置
            function MyLocationMarker(map,nextLat,nextLng) {

                var center = new qq.maps.LatLng(nextLat,nextLng);
                //创建标记
                var marker = new qq.maps.Marker({
                    position: center,
                    map: map
                });
                var anchor = new qq.maps.Point(0, 39),
                        size = new qq.maps.Size(42, 68),
                        origin = new qq.maps.Point(0, 0),
                        markerIcon = new qq.maps.MarkerImage(
                                "${base}/image/GpsLocation.png",
                                size,
                                origin,
                                anchor
                        );
                marker.setIcon(markerIcon);
                //添加到提示窗
                var info = new qq.maps.InfoWindow({
                    map: map
                });
                //获取标记的点击事件
                qq.maps.event.addListener(marker, 'click', function () {
                    info.open();
                    info.setContent('<div style="text-align:center;white-space:nowrap;' +
                            'margin:10px;">我当前的位置</div>');
                    info.setPosition(center);
                });
            }



            //循环添加充电桩的marker
            function findNearbyStation(map,nextLat,nextLng, param) {
                $.ajax({
                    type: "POST",
                    url: "${base}/weStationinfo/findNearbyStation",
                    data: {lat: nextLat, lng: nextLng, param: param},
                    dataType: "json",
                    async: false,
                    success: function (data) {

                        //添加marke之前先清空地图上的旧marke 并且释放marke数组内存
                        for (var j = 0; j < Marks.length; j++) {
                            Marks[j].setMap(null);
                        }
                        Marks = [];
                        for (var i = 0; i < data.length; i++) {
                            eachChargeList(data[i], map);
                        }

                        layer.closeAll('loading');
                    }
                });
            }

            function eachChargeList(data, map) {
                var center = new qq.maps.LatLng(data.stationLat, data.stationLng);
                //创建标记
                var marker = new qq.maps.Marker({
                    position: center,
                    map: map,
                    animation: qq.maps.MarkerAnimation.DROP
                });
                //每添加一个标注 都向数组中添加该标注对象  用于循环清空地图上的marke
                Marks.push(marker);
                var anchor = new qq.maps.Point(0, 39),
                        size = new qq.maps.Size(42, 68),
                        origin = new qq.maps.Point(0, 0),
                        markerIcon = new qq.maps.MarkerImage(
                                "https://3gimg.qq.com/lightmap/api_v2/2/4/99/theme/default/imgs/marker.png",
                                size,
                                origin,
                                anchor
                        );
                marker.setIcon(markerIcon);
                //添加到提示窗
                var info = new qq.maps.InfoWindow({
                    map: map
                });
                //获取标记的点击事件
                qq.maps.event.addListener(marker, 'click', function () {
                    info.open();
                    info.setContent(
                            '<div style="text-align:left;white-space:nowrap; margin:10px;"><span style="color: #9AC747">充电站名称</span>：' + data.stationName + '</div>' +
                            '<div style="text-align:left;white-space:nowrap; margin:10px;"><span style="color: #9AC747">详细地址</span>：' + data.address + '</div>' +
                            '<div style="text-align:left;white-space:nowrap; margin:10px;"><span style="color: #9AC747">距离</span>：' + data.distance + '米</div>' +
                            '<div style="text-align:left;white-space:nowrap; margin:10px;"><span style="color: #9AC747">营业时间</span>：' + data.busineHours + '</div>' +
                            '<div style="text-align:left;white-space:nowrap; margin:10px;"><span style="color: #9AC747">站点电话</span>：' + data.stationTel + '</div>' +
                            '<div style="text-align:left;white-space:nowrap; margin:10px;"><span style="color: #9AC747">描述</span>：' + data.siteGuide + '</div>' +
                            '<div style="text-align:center;white-space:nowrap; margin:10px;"><button  onclick="gps(' + data.stationLng + ',' + data.stationLat + ')" style="width: 100%;background-color: #9AC747" class="layui-btn layui-btn-xs">导航</button></div>'
                    );
                    info.setPosition(center);
                });
            }
        }
        function gps(lng, lat) {
            window.location.href = "http://apis.map.qq.com/uri/v1/marker?marker=coord:" + lat + "," + lng + "; "
        }
    </script>
</body>
</html>